<!--
 * @Author: ybf
 * @Date: 2023-02-21 15:31:51
 * @LastEditTime: 2023-02-22 10:43:19
 * @Description: 描述
 * Copyright (c) 2023 by 慧能分享, All Rights Reserved.
-->
<template>
  <div class="otherManage">
    <NuVerifyForm :model="formData" ref="formData" label-width="90px" class="searchForm" @searchForm="searchForm"
      :buttons="fyButtons">
      <NuformItem label="名称" prop="deviceName" width="300px">
        <nu-input type="text" v-model="formData.deviceName" size="middle" placeholder="请输入名称"></nu-input>
      </NuformItem>
      <NuformItem label="类型" prop="deviceName" width="300px">
        <nu-select class="searchSelect" :filterable="true" :list="typeList" type="text" v-model="formData.deviceType"
           autocomplete="off" style="width: 100%;" placeholder="请选择">
        </nu-select>
      </NuformItem>
      <div class="btnBox">
        <nu-button type="primary" class="searchButton" @click="searchTable">搜索</nu-button>
        <nu-button class="searchButton" @click="clearParams">清除</nu-button>
      </div>
    </NuVerifyForm>
    <div class="line"></div>
    <div style="height:35px;position: relative;padding: 0 10px;" class="renovateTime">
      <nu-button class="searchButton" @click="addTable">新增</nu-button>
    </div>
    <NuTableList :showFilter="false" :columns="columns" :dataSource="dataSource" :options="options"
      :pagination="pagination" @handleSizeChange="handleSizeChange" @handleChangePage="handleChangePage"
      :operates="operates(this)">
    </NuTableList>
    <nu-dialog :title="dialogTitle" :visible.sync="dialogShow" width="800px" center :close-on-click-modal="false" top="5vh"
      :modal-append-to-body="false" @close="diaClose">
      <div class="dialogHeaderSearch">
        <NuVerifyForm :model="dialogFormData" ref="dialogFormData" label-width="70px" class="submitForm"
          @submitForm="diaSubmitForm" :buttons="fyButtons">
          <NuformItem label="类型：" prop="deviceType" width="47%" :rules="[{ required: true, message: '类型不能为空' }]">
            <nu-select class="searchSelect" :filterable="true" :list="typeList" type="text"
              v-model="dialogFormData.deviceType" autocomplete="off" style="width: calc(100% - 5px);margin-left: 2px;"
              :disabled="dialogFormDisabled" placeholder="请选择" @change="unitTypeChange">
            </nu-select>
          </NuformItem>
          <NuformItem label="名称：" prop="deviceName" width="50%" :rules="[{ required: true, message: '名称不能为空' }]">
            <nu-input type="text" v-model="dialogFormData.deviceName" size="middle" :disabled="dialogFormDisabled"
              placeholder="请输入"></nu-input>
          </NuformItem>
        </NuVerifyForm>
        <nu-button class="dialogSearchButton" type="primary" @click="diaClose">取消</nu-button>
        <nu-button class="dialogSearchButton" type="primary" @click="diaSave" v-if="dialogTitle == '编辑'">确定</nu-button>
        <nu-button class="dialogSearchButton" type="primary" @click="diaSave" v-if="dialogTitle == '新增'">确定</nu-button>
      </div>
    </nu-dialog>
  </div>
</template>
  
<script>
import nuCol from "@/components/base/col.vue"
import nutbTitle from "@/components/base/tableTitle.vue"
import NuVerifyForm from "@/components/verify-form"
import NuformItem from "@/components/verify-form/form-item.vue"
import nuInput from "@/components/base/input"
import nuSelect from "@/components/base/select"
import nuButton from "@/components/base/button"
import NuTableList from "@/components/tableList/TableFormList"
import nuDialog from "@/components/base/dialog"
const operates = that => [
  {
    label: '查看',
    icon: '',
    width: '50px',
    isShow: row => {
      return true;
    },
    disabled: row => {
      return false;
    },
    method: row => {
      that.openDetail(row);
    },
  },
  // {
  //   isShow: row => {
  //     return false;
  //   },
  // },
  {
    label: '修改',
    icon: '',
    width: '50px',
    isShow: row => {
      return true;
    },
    disabled: row => {
      return false;
    },
    method: row => {
      that.openEdit(row);
    },
  },
  {
    label: '删除',
    icon: '',
    width: '50px',
    isShow: row => {
      return true;
    },
    disabled: row => {
      return false;
    },
    method: row => {
      that.tbRowdetele(row);
    },
  },
];
import { getToken } from "@/utils/auth";
export default {
  name: "otherManage",
  components: { nuCol, nutbTitle, NuVerifyForm, NuformItem, nuInput, nuSelect, nuButton, NuTableList, nuDialog },
  data() {
    return {
      formData: {
        deviceName: '',
        deviceType: ''
      },
      dialogFormData: {
        deviceName: '',
        deviceType: "",
      },
      fyButtons: [],
      operates,
      pagination: {
        pageSize: 20,
        total: 0,
        pageNum: 1,
      },
      dialogTitle: '',
      dialogShow: false,
      typeList: [],
      columns: [
        {
          label: '序号',
          prop: 'ranking',
          width: '70px',
          render: (h, params) => {
            return h('span', params.index + 1 + (this.pagination.pageNum - 1) * this.pagination.pageSize);
          },
        },
        {
          label: '类型',
          prop: 'deviceTypeName',
        },
        {
          label: '名称',
          prop: 'deviceName',
        }
      ],
      dataSource: [{}],
      options: {
        'default-expand-all': true,
        'element-loading-background': 'rgba(225,239,242)',
        'element-loading-text': '数据正在加载中',
        'row-key': 'pid',
        'header-cell-style': {
          background: 'rgba(105, 159, 209, 0.7)',
          color: '#fff',
          fontWeight: 'bold',
          fontsize: '16px',
        },
        height: 'calc(100vh - 350px)',
        // props: {
        //   fixed: 'right'
        // }
      }
    };
  },
  computed: {
    dialogFormDisabled() {
      return this.dialogTitle == '详情'
    }
  },
  created() {
  },
  mounted() {
    this.getotherManageTableData();
    this.getDeviceType()
  },
  methods: {
    /**
     * 查询
     */
    searchTable() {
      this.$refs['formData'].searchForm('form');
    },
    /**
     * form组件内置查询事件
     */
    searchForm(val) {
      if (val) {
        this.getotherManageTableData();
      }
    },
    /**
     * 新增
     */
    addTable() {
      this.dialogTitle = '新增'
      this.dialogShow = true
    },
    /**
     * 导入
     */
    importTable() {
      this.upload.title = "厂站表导入";
      this.upload.open = true;
    },
    /**
     * 每页条数变化事件
     */
    handleSizeChange(val) {
      this.pagination.pageNum = 1;
      this.pagination.pageSize = val;
      this.getotherManageTableData();
    },
    /**
     * 改变分页触发事件
     */
    handleChangePage(val) {
      this.pagination.pageNum = val;
      this.getotherManageTableData();
    },
    /**
     * 类型change
     */
    unitTypeChange() {

    },
    /**
     * 查询字典数据列表
     */
    async getDeviceType() {
      let a = await this.getDataItem({ dictType: "RELATED_DEVICE_TYPE", pageSize: 9999, pageNum: 1 })
      a.map((item) => {
        if (item.dictActualValue != 301 && item.dictActualValue != 302) {
          this.typeList.push({ label: item.dictName, value: item.dictActualValue })
        }
      })
    },
    async getDataItem(postData) {
      let data = await this.$httpGet(window.api.getOneLevelDicts, postData)
        .then((response) => {
          if (response.code == 200) {
            return response.rows
          }
        })
      return data;
    },
    /**
     * 表格-编辑
     */

    openEdit(row) {
      this.dialogTitle = '编辑'
      this.dialogShow = true
      Object.assign(this.dialogFormData, row)
    },
    /**
     * 表格-详情
     */
    openDetail(row) {
      this.dialogTitle = '详情'
      this.dialogShow = true
      Object.assign(this.dialogFormData, row)
    },
    /**
    * 清除数据
    */
    clearParams() {
      this.resetForm('formData')
    },
    /**
     * 重置表单
     */
    resetForm(formName) {
      this.$refs[formName].resetForm('form');
      for (let k in this[formName]) {
        if (Object.prototype.toString.call(this[formName][k]) == "[object String]") {
          this[formName][k] = ''
        } else if (Object.prototype.toString.call(this[formName][k]) == "[object Array]") {
          this[formName][k] = []
        } else if (Object.prototype.toString.call(this[formName][k]) == "[object Number]") {
          this[formName][k] = ''
        }
      }
    },
    /**
     * dialogFormData组件内置提交事件
     */
    diaSubmitForm(val) {
      if (val) {
        let o = this.typeList.filter(item => item.value == this.dialogFormData.deviceType)[0]
        this.dialogFormData['deviceTypeName'] = o.label
        if (this.dialogTitle == '编辑') {
          this.editotherManageTableData()
        } else if (this.dialogTitle == '新增') {
          this.addotherManageTableData()
        }
      }
    },
    /**
     * 弹窗-保存
     */
    diaSave() {
      this.$refs['dialogFormData'].submitForm('form');
    },
    /**
     * 弹窗-关闭
     */
    diaClose() {
      this.dialogShow = false
      this.resetForm('dialogFormData')
    },
    /**
     * 表格-删除
     */
    tbRowdetele(row) {
      this.$confirm('确定要删除设备【' + row.deviceName + '】吗？若删除当前设备，则该设备关联的所有量测同时删除，此操作请慎重，是否确认删除？', '确认删除', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.delStationTableData(row)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    /**
     * 获取表格数据
     */
    getotherManageTableData() {
      let postData = {
        ...this.formData,
        ...this.pagination,
      };
      for (let k in postData.query) {
        if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpGet(window.api.getDevices, postData).then(res => {
        if (res.code == 200 && res.rows) {
          this.pagination.total = res.total;
          this.dataSource = res.rows;
        } else {
          this.dataSource = [];
        }
      }).catch(err => {
        this.dataSource = [];
      });
    },
    /**
     * 编辑接口
     */
    editotherManageTableData() {
      let postData = {
        ...this.dialogFormData,
      };
      for (let k in postData.query) {
        if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpPost(window.api.saveDevice, postData).then(res => {
        if (res.code = 200) {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.diaClose()
          this.getotherManageTableData()
        } else {
        }
      }).catch(err => {

      });
    },
    /**
     * 删除表格数据
     */
    delStationTableData(row) {
      let postData = {
        deviceId: row.deviceId
      };
      for (let k in postData.query) {
        if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpGet(window.api.deleteDevice, postData).then(res => {
        if (res.code == 200) {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getotherManageTableData()
        } else {
        }
      }).catch(err => {

      });
    },
    /**
     * 新增接口
     */
    addotherManageTableData() {
      let postData = {
        ...this.dialogFormData,
      };
      for (let k in postData.query) {
        if (postData.query[k] && Object.prototype.toString.call(postData.query[k]) == '[object String]') {
          postData.query[k] = postData.query[k].toString().trim();
        }
      }
      this.$httpPost(window.api.saveDevice, postData).then(res => {
        if (res.code == 200) {
          this.$message({
            message: '成功',
            type: 'success'
          })
          this.diaClose()
          this.getotherManageTableData()
        } else {
        }
      }).catch(err => {

      });
    }
  }
};
</script>
  
<style scoped lang="scss">
.otherManage {
  height: calc(100vh - 70px);
}

.searchForm {
  // height: calc(100% - 40px);
  display: flex;
  // align-items: center;
  position: relative;
  flex-wrap: wrap;
  padding-right: 160px;
}

.submitForm {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}

.btnBox {
  display: flex;
  float: right;
  z-index: 10;
  position: absolute;
  // top: 15px;
  right: 10px;
  margin: 10px 0 0 0;
}

.dialogHeaderSearch {
  background-color: var(--model-bgc);
  padding: 10px;
  margin-top: 10px;
  display: flex;
  flex-wrap: wrap;
  justify-content: right;

  .el-form-item {
    margin-bottom: 4px;

    ::v-deep .el-form-item__error {
      padding-top: 0;
    }
  }
}

::v-deep .el-upload {
  width: 100%;

  .el-upload-dragger {
    width: auto;
  }
}

.dialogSearchButton {
  margin-top: 10px;
}
</style>
  
  